<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智教慧学全景云平台 - 个人中心</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <!-- 引入Chart.js实现数据可视化 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑过渡曲线 */
        }
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.7;
        }

        /* 1. 头部导航：与主站风格统一，增加返回首页入口 */
        .header {
            background-color: #ffffff;
            color: #333333;
            padding: 10px 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 10;
        }
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .header-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .back-home {
            color: #4361ee;
            font-size: 1.2em;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 8px;
        }
        .back-home:hover {
            background-color: rgba(67, 97, 238, 0.1);
            transform: translateX(-2px);
        }
        .header h1 {
            font-size: 1.2em;
            margin: 0;
            font-weight: 600;
        }
        .header p {
            font-size: 0.85em;
            opacity: 0.8;
            margin-left: 8px;
            color: #666;
        }
        .user-info-header {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid linear-gradient(90deg, #4361ee, #b5179e);
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(67, 97, 238, 0.2);
        }
        .user-name {
            font-weight: 500;
            color: #2d3748;
        }
        .role-tag {
            font-size: 0.75em;
            padding: 3px 8px;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            color: white;
            border-radius: 20px;
        }

        /* 2. 导航栏：保持粘性定位，只保留个人中心导航 */
        .nav-bar {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 9;
        }
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
        }
        .nav-bar a {
            float: left;
            display: block;
            color: #495057;
            text-align: center;
            padding: 16px 20px;
            text-decoration: none;
            font-weight: 500;
            position: relative;
        }
        .nav-bar a:hover {
            color: #4361ee;
        }
        .nav-bar a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            transition: width 0.3s ease;
        }
        .nav-bar a:hover::after, .nav-bar a.active::after {
            width: 100%;
        }
        .nav-bar a.active {
            color: #4361ee;
        }

        /* 3. 个人中心主体：左右分栏布局，支持内容切换动画 */
        .profile-container {
            max-width: 1200px;
            margin: 30px auto;
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 30px;
            padding: 0 20px;
        }

        /* 3.1 左侧菜单：折叠式设计，带选中动画 */
        .profile-sidebar {
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
            overflow: hidden;
        }
        .sidebar-section {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        .sidebar-title {
            padding: 16px 20px;
            font-weight: 600;
            color: #2d3748;
            background-color: rgba(67, 97, 238, 0.05);
            border-left: 4px solid #4361ee;
        }
        .sidebar-menu {
            list-style: none;
        }
        .sidebar-menu li {
            position: relative;
        }
        .sidebar-menu a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            color: #64748b;
            text-decoration: none;
            font-size: 0.95em;
        }
        .sidebar-menu a:hover {
            color: #4361ee;
            background-color: rgba(67, 97, 238, 0.05);
        }
        .sidebar-menu a.active {
            color: #4361ee;
            background-color: rgba(67, 97, 238, 0.1);
            font-weight: 500;
        }
        .sidebar-menu a.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: linear-gradient(180deg, #4361ee, #b5179e);
        }
        .menu-icon {
            font-size: 1.1em;
            width: 20px;
            text-align: center;
        }

        /* 3.2 右侧内容区：卡片式布局，内容切换动画 */
        .profile-content {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        .content-card {
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
            padding: 30px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.5s ease forwards;
        }
        .content-card:nth-child(1) { animation-delay: 0.1s; }
        .content-card:nth-child(2) { animation-delay: 0.2s; }
        .content-card:nth-child(3) { animation-delay: 0.3s; }
        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        .content-title {
            font-size: 1.4em;
            color: #2d3748;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .content-title i {
            color: #4361ee;
        }
        .content-action {
            padding: 8px 16px;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
            margin-left: 12px;
        }
        .content-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.4);
            background: linear-gradient(90deg, #3a56d4, #a01489);
        }
        /* 教师作业修改按钮特殊样式：区分主按钮，突出作业功能 */
        .homework-action {
            background: linear-gradient(90deg, #22c55e, #16a34a);
            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
        }
        .homework-action:hover {
            background: linear-gradient(90deg, #16a34a, #15803d);
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
        }

        /* 4. 个人信息卡片：网格布局，带编辑交互 */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }
        .info-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .info-label {
            font-size: 0.9em;
            color: #64748b;
            font-weight: 500;
        }
        .info-value {
            font-size: 1.05em;
            color: #2d3748;
            padding: 8px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        .info-value.tag {
            display: inline-block;
            padding: 5px 12px;
            background-color: rgba(67, 97, 238, 0.1);
            color: #4361ee;
            border-radius: 20px;
            border: none;
        }
        .edit-btn {
            color: #4361ee;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 0;
        }
        .edit-btn:hover {
            color: #3a56d4;
            text-decoration: underline;
        }

        /* 5. 学习数据可视化：图表卡片，带hover高亮 */
        .data-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }
        .chart-container {
            height: 300px;
            position: relative;
        }
        .stat-card {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .stat-item {
            background-color: rgba(67, 97, 238, 0.05);
            padding: 15px;
            border-radius: 12px;
            text-align: center;
            transition: all 0.3s ease;
        }
        .stat-item:hover {
            background-color: rgba(67, 97, 238, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.1);
        }
        .stat-value {
            font-size: 1.8em;
            font-weight: 700;
            color: #4361ee;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 0.9em;
            color: #64748b;
        }

        /* 6. 权限管理卡片：表格布局，带状态标签 */
        .permission-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        .permission-table th, .permission-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        .permission-table th {
            color: #2d3748;
            font-weight: 600;
            background-color: rgba(67, 97, 238, 0.05);
        }
        .permission-table tr:hover {
            background-color: rgba(67, 97, 238, 0.03);
        }
        .permission-tag {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 500;
        }
        .tag-enabled {
            background-color: rgba(34, 197, 94, 0.1);
            color: #22c55e;
        }
        .tag-disabled {
            background-color: rgba(156, 163, 175, 0.1);
            color: #9ca3af;
        }

        /* 7. 安全设置卡片：表单样式，带验证反馈 */
        .security-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 15px;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .form-label {
            font-weight: 500;
            color: #2d3748;
        }
        .form-control {
            padding: 12px 15px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1em;
            color: #2d3748;
            transition: border-color 0.3s ease;
        }
        .form-control:focus {
            outline: none;
            border-color: #4361ee;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }
        .form-hint {
            font-size: 0.85em;
            color: #64748b;
            margin-top: 5px;
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e2e8f0;
            transition: 0.4s;
            border-radius: 24px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }
        input:checked + .toggle-slider {
            background: linear-gradient(90deg, #4361ee, #b5179e);
        }
        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }
        .toggle-group {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        /* 8. 页脚：与主站保持一致 */
        .footer {
            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
            color: #fff;
            padding: 60px 20px 30px;
            margin-top: 50px;
        }
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        .footer-col h3 {
            font-size: 1.6em;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
        }
        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #4361ee, #b5179e);
            border-radius: 2px;
        }
        .footer-col p {
            font-size: 1.05em;
            color: #cbd5e1;
            margin-bottom: 15px;
        }
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            color: #cbd5e1;
            font-size: 1.05em;
        }
        .contact-icon {
            margin-right: 12px;
            color: #4361ee;
            font-size: 1.2em;
        }
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
            font-size: 1em;
        }

        /* 9. 动画关键帧：统一入场与交互动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .pulse-on-hover:hover {
            animation: pulse 0.5s ease;
        }

        /* 10. 响应式适配：确保移动端体验 */
        @media (max-width: 768px) {
            .profile-container {
                grid-template-columns: 1fr;
            }
            .data-grid {
                grid-template-columns: 1fr;
            }
            .info-grid {
                grid-template-columns: 1fr;
            }
            .stat-card {
                grid-template-columns: repeat(2, 1fr);
            }
            .header-content {
                flex-wrap: wrap;
            }
            .user-info-header {
                margin-top: 10px;
                width: 100%;
                justify-content: flex-end;
            }
            .nav-container {
                justify-content: center;
                flex-wrap: wrap;
            }
            .nav-bar a {
                padding: 14px 12px;
                font-size: 0.95em;
            }
            /* 移动端按钮布局调整：换行显示 */
            .content-actions {
                display: flex;
                flex-direction: column;
                gap: 10px;
                width: 100%;
            }
            .content-action {
                margin-left: 0;
                width: 100%;
            }
        }
        @media (max-width: 480px) {
            .content-card {
                padding: 20px 15px;
            }
            .stat-card {
                grid-template-columns: 1fr;
            }
            .permission-table th, .permission-table td {
                padding: 10px 8px;
                font-size: 0.9em;
            }
            .sidebar-menu a {
                padding: 12px 15px;
                font-size: 0.9em;
            }
        }
    </style>
</head>
<body>

<!-- 头部导航：支持返回首页 -->
<div class="header">
    <div class="header-content">
        <div class="header-title">
            <div class="back-home" onclick="window.location.href='shouye.html'">
                <i class="fa fa-arrow-left"></i> 返回首页
            </div>
            <div>
                <h1>智教慧学全景云平台</h1>
                <p>学径导航，知心学伴</p>
            </div>
        </div>
        <div class="user-info-header">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="avatar pulse-on-hover">
            <div>
                <div class="user-name">李老师</div>
                <div class="role-tag">高中数学教师</div>
            </div>
        </div>
    </div>
</div>

<!-- 导航栏：只保留个人中心入口 -->
<div class="nav-bar">
    <div class="nav-container">
        <a href="profile.html" class="active">个人中心</a>
    </div>
</div>

<!-- 个人中心主体内容 -->
<div class="profile-container">
    <!-- 左侧菜单：删除权限管理相关菜单 -->
    <div class="profile-sidebar">
        <div class="sidebar-section">
            <div class="sidebar-title">个人中心</div>
            <ul class="sidebar-menu">
                <li><a href="#info" class="active"><i class="fa fa-user menu-icon"></i> 个人信息</a></li>
                <li><a href="#learning"><i class="fa fa-line-chart menu-icon"></i> 教学数据</a></li>
                <li><a href="#courses"><i class="fa fa-book menu-icon"></i> 我的课程</a></li>
                <li><a href="#homework"><i class="fa fa-pencil-square-o menu-icon"></i> 作业管理</a></li>
                <li><a href="#resources"><i class="fa fa-folder-open menu-icon"></i> 我的资源</a></li>
            </ul>
        </div>
        <div class="sidebar-section">
            <div class="sidebar-title">帮助与服务</div>
            <ul class="sidebar-menu">
                <li><a href="#help"><i class="fa fa-question-circle menu-icon"></i> 帮助中心</a></li>
                <li><a href="#feedback"><i class="fa fa-comment menu-icon"></i> 意见反馈</a></li>
                <li><a href="#settings"><i class="fa fa-cog menu-icon"></i> 系统设置</a></li>
            </ul>
        </div>
    </div>

    <!-- 右侧内容区：删除布置新作业和导出数据按钮 -->
    <div class="profile-content">
        <!-- 1. 个人信息卡片：保留原功能 -->
        <div class="content-card" id="info">
            <div class="content-header">
                <div class="content-title"><i class="fa fa-user-circle"></i> 个人信息</div>
                <div class="content-actions">
                    <button class="content-action edit-btn" id="edit-info">
                        <i class="fa fa-pencil"></i> 编辑信息
                    </button>
                    <!-- 保留作业管理入口按钮 -->
                    <button class="content-action homework-action" onclick="window.location.href='#homework'" onclick="window.location.href='zuoye.html'">
                        <i class="fa fa-pencil-square-o"></i> 作业管理
                    </button>
                </div>
            </div>
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">姓名</div>
                    <div class="info-value">李老师</div>
                </div>
                <div class="info-item">
                    <div class="info-label">所属学校</div>
                    <div class="info-value">北京市第一中学</div>
                </div>
                <div class="info-item">
                    <div class="info-label">教授学科</div>
                    <div class="info-value">高中数学</div>
                </div>
                <div class="info-item">
                    <div class="info-label">教龄</div>
                    <div class="info-value">8年</div>
                </div>
                <div class="info-item">
                    <div class="info-label">职称</div>
                    <div class="info-value tag">一级教师</div>
                </div>
                <div class="info-item">
                    <div class="info-label">联系电话</div>
                    <div class="info-value">138****5678 <button class="edit-btn"><i class="fa fa-edit"></i> 修改</button></div>
                </div>
                <div class="info-item">
                    <div class="info-label">电子邮箱</div>
                    <div class="info-value">teacher_li@school.edu.cn <button class="edit-btn"><i class="fa fa-edit"></i> 修改</button></div>
                </div>
                <div class="info-item">
                    <div class="info-label">账户状态</div>
                    <div class="info-value tag" style="background-color:rgba(34,197,94,0.1); color:#22c55e;">正常</div>
                </div>
                <div class="info-item">
                    <div class="info-label">最后登录</div>
                    <div class="info-value">2025-09-25 08:30:45（北京）</div>
                </div>
                <div class="info-item">
                    <div class="info-label">账户等级</div>
                    <div class="info-value tag">高级会员</div>
                </div>
            </div>
        </div>

        <!-- 2. 教学数据卡片：删除导出报告和作业数据按钮 -->
        <div class="content-card" id="learning">
            <div class="content-header">
                <div class="content-title"><i class="fa fa-line-chart"></i> 教学数据统计</div>
            </div>
            <div class="data-grid">
                <!-- 左侧：课程完成情况图表 -->
                <div>
                    <div class="info-label" style="margin-bottom:10px;">本学期课程进度</div>
                    <div class="chart-container">
                        <canvas id="courseChart"></canvas>
                    </div>
                </div>
                <!-- 右侧：资源使用情况图表 -->
                <div>
                    <div class="info-label" style="margin-bottom:10px;">资源使用统计（近30天）</div>
                    <div class="chart-container">
                        <canvas id="resourceChart"></canvas>
                    </div>
                </div>
            </div>
            <!-- 数据统计卡片 -->
            <div class="stat-card">
                <div class="stat-item">
                    <div class="stat-value">12</div>
                    <div class="stat-label">已创建课程</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">248</div>
                    <div class="stat-label">上传资源数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">36</div>
                    <div class="stat-label">已布置作业</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">92%</div>
                    <div class="stat-label">作业批改率</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">98%</div>
                    <div class="stat-label">课程完成率</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">1568</div>
                    <div class="stat-label">资源下载量</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">89%</div>
                    <div class="stat-label">学生提交率</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">126</div>
                    <div class="stat-label">待批改作业</div>
                </div>
            </div>
        </div>

        <!-- 3. 作业管理卡片：删除布置新作业和导出数据按钮 -->
        <div class="content-card" id="homework">
            <div class="content-header">
                <div class="content-title"><i class="fa fa-pencil-square-o"></i> 作业管理</div>
                <div class="content-actions">
                    <!-- 仅保留修改作业按钮 -->
                    <button class="content-action">
                        <!-- <i class="fa fa-edit"></i> 修改作业 -->
                    </button>
                </div>
            </div>
            <!-- 作业筛选栏 -->
            <div style="display:flex; gap:15px; margin-bottom:20px; flex-wrap:wrap;">
                <select class="form-control" style="width:auto; min-width:150px;">
                    <option>全部课程</option>
                    <option>高中数学-必修一</option>
                    <option>高中数学-必修二</option>
                    <option>高中数学-选修一</option>
                </select>
                <select class="form-control" style="width:auto; min-width:150px;">
                    <option>全部状态</option>
                    <option>未发布</option>
                    <option>待提交</option>
                    <option>批改中</option>
                    <option>已完成</option>
                </select>
                <input type="date" class="form-control" style="width:auto; min-width:180px;">
                <button class="content-action" style="width:auto;">
                    <i class="fa fa-search"></i> 筛选
                </button>
            </div>
            <!-- 作业列表表格 -->
            <table class="permission-table">
                <thead>
                    <tr>
                        <th>作业名称</th>
                        <th>所属课程</th>
                        <th>布置时间</th>
                        <th>截止时间</th>
                        <th>学生数</th>
                        <th>提交数</th>
                        <th>批改数</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>一次函数章节练习</td>
                        <td>高中数学-必修一</td>
                        <td>2025-09-20</td>
                        <td>2025-09-25</td>
                        <td>45</td>
                        <td>43</td>
                        <td>38</td>
                        <td><span class="permission-tag tag-enabled">批改中</span></td>
                        <td>
                            <button class="edit-btn" style="color:#4361ee;">修改</button>
                            <button class="edit-btn" style="color:#22c55e;">批改</button>
                            <button class="edit-btn" style="color:#9ca3af;">查看</button>
                        </td>
                    </tr>
                    <tr>
                        <td>集合与函数基础测试</td>
                        <td>高中数学-必修一</td>
                        <td>2025-09-15</td>
                        <td>2025-09-18</td>
                        <td>45</td>
                        <td>45</td>
                        <td>45</td>
                        <td><span class="permission-tag tag-enabled">已完成</span></td>
                        <td>
                            <button class="edit-btn" style="color:#4361ee;">修改</button>
                            <button class="edit-btn" style="color:#9ca3af;">重批</button>
                            <button class="edit-btn" style="color:#9ca3af;">分析</button>
                        </td>
                    </tr>
                    <tr>
                        <td>二次函数综合应用题</td>
                        <td>高中数学-必修一</td>
                        <td>2025-09-28</td>
                        <td>2025-10-05</td>
                        <td>45</td>
                        <td>0</td>
                        <td>0</td>
                        <td><span class="permission-tag tag-enabled">待提交</span></td>
                        <td>
                            <button class="edit-btn" style="color:#4361ee;">修改</button>
                            <button class="edit-btn" style="color:#ef4444;">取消</button>
                            <button class="edit-btn" style="color:#9ca3af;">预览</button>
                        </td>
                    </tr>
                    <tr>
                        <td>指数函数预习作业</td>
                        <td>高中数学-必修一</td>
                        <td>-</td>
                        <td>2025-10-10</td>
                        <td>45</td>
                        <td>0</td>
                        <td>0</td>
                        <td><span class="permission-tag tag-disabled">未发布</span></td>
                        <td>
                            <button class="edit-btn" style="color:#4361ee;">修改</button>
                            <button class="edit-btn" style="color:#22c55e;">发布</button>
                            <button class="edit-btn" style="color:#ef4444;">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 作业快速处理入口 -->
            <div style="margin-top:25px; padding-top:20px; border-top:1px solid rgba(0,0,0,0.05);">
                <div class="info-label" style="margin-bottom:15px;">最近待处理作业</div>
                <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:15px;">
                    <div style="border:1px solid #e2e8f0; border-radius:8px; padding:15px; display:flex; justify-content:space-between; align-items:center;">
                        <div>
                            <div style="font-weight:500; color:#2d3748;">一次函数章节练习</div>
                            <div style="font-size:0.85em; color:#64748b;">待批改：5份 | 截止：2025-09-25</div>
                        </div>
                        <button class="content-action homework-action" style="padding:6px 12px; font-size:0.9em;">
                            立即批改
                        </button>
                    </div>
                    <div style="border:1px solid #e2e8f0; border-radius:8px; padding:15px; display:flex; justify-content:space-between; align-items:center;">
                        <div>
                            <div style="font-weight:500; color:#2d3748;">二次函数综合应用题</div>
                            <div style="font-size:0.85em; color:#64748b;">待发布 | 截止：2025-10-05</div>
                        </div>
                        <button class="content-action homework-action" style="padding:6px 12px; font-size:0.9em;">
                            立即修改
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 4. 安全设置卡片：删除保存设置按钮 -->
        <div class="content-card" id="security">
            <div class="content-header">
                <div class="content-title"><i class="fa fa-lock"></i> 安全设置</div>
            </div>
            <form class="security-form">
                <div class="form-group">
                    <label class="form-label">修改密码</label>
                    <input type="password" class="form-control" placeholder="请输入原密码">
                    <input type="password" class="form-control" placeholder="请输入新密码（至少6位，包含数字和字母）">
                    <input type="password" class="form-control" placeholder="请再次输入新密码">
                    <div class="form-hint">建议每3个月更换一次密码，避免使用与其他平台相同的密码</div>
                </div>
                <div class="form-group">
                    <label class="form-label">绑定手机</label>
                    <input type="tel" class="form-control" value="138****5678" readonly>
                    <button type="button" class="edit-btn" style="width: fit-content;">更换绑定手机</button>
                </div>
                <div class="form-group">
                    <label class="form-label">绑定邮箱</label>
                    <input type="email" class="form-control" value="teacher_li@school.edu.cn" readonly>
                    <button type="button" class="edit-btn" style="width: fit-content;">更换绑定邮箱</button>
                </div>
                <div class="form-group">
                    <label class="form-label">二次验证</label>
                    <div class="toggle-group">
                        <span>登录时需要短信验证</span>
                        <label class="toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="toggle-group">
                        <span>敏感操作需要邮箱验证</span>
                        <label class="toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">登录设备管理</label>
                    <div class="info-value" style="border:1px solid #e2e8f0; border-radius:8px; padding:15px;">
                        <div style="display:flex; justify-content:space-between; margin-bottom:10px;">
                            <div>
                                <span style="font-weight:500;">Windows 10 - Chrome</span>
                                <span class="permission-tag tag-enabled" style="margin-left:10px;">当前设备</span>
                            </div>
                            <button class="edit-btn">详情</button>
                        </div>
                        <div style="display:flex; justify-content:space-between; margin-bottom:10px;">
                            <div>
                                <span>iOS 16 - Safari</span>
                                <span class="permission-tag" style="margin-left:10px; background-color:rgba(245,158,11,0.1); color:#f59e0b;">常用设备</span>
                            </div>
                            <button class="edit-btn">详情</button>
                        </div>
                        <div style="display:flex; justify-content:space-between;">
                            <div>
                                <span>Android 13 - Edge</span>
                                <span class="permission-tag" style="margin-left:10px; background-color:rgba(239,68,68,0.1); color:#ef4444;">陌生设备</span>
                            </div>
                            <button class="edit-btn" style="color:#ef4444;">移除</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 页脚：与主站保持一致 -->
<div class="footer">
    <div class="footer-container">
        <div class="footer-col">
            <h3>关于平台</h3>
            <p>智教慧学全景云平台致力于为教育工作者和学习者提供全方位的智慧教育解决方案，促进教育资源共享与高效利用。</p>
        </div>
        <div class="footer-col">
            <h3>快速链接</h3>
            <p><a href="index.html" style="color: #cbd5e1; text-decoration: none;">首页</a></p>
            <p><a href="index.html#resources" style="color: #cbd5e1; text-decoration: none;">资源管理</a></p>
            <p><a href="index.html#courses" style="color: #cbd5e1; text-decoration: none;">课程管理</a></p>
            <p><a href="index.html#downloads" style="color: #cbd5e1; text-decoration: none;">资源下载</a></p>
        </div>
        <div class="footer-col">
            <h3>联系我们</h3>
            <div class="contact-item">
                <i class="fa fa-envelope contact-icon"></i>
                <span>477712169@qq.com</span>
            </div>
            <div class="contact-item">
                <i class="fa fa-phone contact-icon"></i>
                <span>15631606560</span>
            </div>
            <div class="contact-item">
                <i class="fa fa-map-marker contact-icon"></i>
                <span>北京北大方正软件职业技术学院</span>
            </div>
        </div>
    </div>
    <div class="copyright">
        <p>版权所有 © 智教慧学全景云平台 2025 | 京ICP备12345678号</p>
    </div>
</div>

<!-- 数据可视化脚本 -->
<script>
    // 课程进度图表
    const courseCtx = document.getElementById('courseChart').getContext('2d');
    new Chart(courseCtx, {
        type: 'doughnut',
        data: {
            labels: ['已完成', '进行中', '未开始'],
            datasets: [{
                label: '课程进度',
                data: [65, 25, 10],
                backgroundColor: [
                    'rgba(67, 97, 238, 0.8)',
                    'rgba(181, 23, 158, 0.8)',
                    'rgba(203, 213, 225, 0.8)'
                ],
                borderColor: [
                    'rgba(67, 97, 238, 1)',
                    'rgba(181, 23, 158, 1)',
                    'rgba(203, 213, 225, 1)'
                ],
                borderWidth: 1,
                hoverOffset: 10
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        font: {
                            size: 12
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.label}: ${context.raw}%`;
                        }
                    }
                }
            },
            cutout: '60%'
        }
    });

    // 资源使用统计图表
    const resourceCtx = document.getElementById('resourceChart').getContext('2d');
    new Chart(resourceCtx, {
        type: 'bar',
        data: {
            labels: ['课件', '视频', '音频', '试卷', '习题', '其他'],
            datasets: [{
                label: '上传数量',
                data: [68, 24, 16, 42, 75, 23],
                backgroundColor: 'rgba(67, 97, 238, 0.7)',
                borderColor: 'rgba(67, 97, 238, 1)',
                borderWidth: 1,
                borderRadius: 6
            }, {
                label: '下载数量',
                data: [245, 186, 98, 320, 452, 68],
                backgroundColor: 'rgba(181, 23, 158, 0.7)',
                borderColor: 'rgba(181, 23, 158, 1)',
                borderWidth: 1,
                borderRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        font: {
                            size: 12
                        }
                    }
                }
            },
            barPercentage: 0.6,
            categoryPercentage: 0.7
        }
    });

    // 菜单切换交互
    const menuItems = document.querySelectorAll('.sidebar-menu a');
    menuItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            // 移除所有激活状态
            menuItems.forEach(link => link.classList.remove('active'));
            // 添加当前激活状态
            this.classList.add('active');
            // 滚动到对应内容（平滑滚动）
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
                // 为目标内容添加高亮动画
                targetElement.style.boxShadow = '0 8px 30px rgba(67, 97, 238, 0.15)';
                setTimeout(() => {
                    targetElement.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.03)';
                }, 1000);
            }
        });
    });

    // 编辑信息按钮交互
    const editInfoBtn = document.getElementById('edit-info');
    let isEditing = false;
    editInfoBtn.addEventListener('click', function() {
        if (isEditing) {
            // 保存编辑状态
            this.innerHTML = '<i class="fa fa-pencil"></i> 编辑信息';
            this.style.background = 'linear-gradient(90deg, #4361ee, #b5179e)';
            // 模拟保存效果
            alert('个人信息已保存！');
            isEditing = false;
            // 禁用输入框
            document.querySelectorAll('.info-value input').forEach(input => {
                input.readOnly = true;
                input.style.border = 'none';
                const value = input.value;
                input.parentNode.innerHTML = `<div class="info-value">${value}</div>`;
            });
        } else {
            // 进入编辑状态
            this.innerHTML = '<i class="fa fa-save"></i> 保存信息';
            this.style.background = 'linear-gradient(90deg, #22c55e, #16a34a)';
            isEditing = true;
            // 将文本转换为输入框
            document.querySelectorAll('.info-value').forEach(item => {
                if (!item.classList.contains('tag')) {
                    const value = item.textContent.trim();
                    item.innerHTML = `<input type="text" class="form-control" value="${value}">`;
                }
            });
        }
    });

    // 作业修改按钮交互：点击表格中"修改"按钮弹窗提示
    const homeworkEditBtns = document.querySelectorAll('.edit-btn[style*="color:#4361ee"]');
    homeworkEditBtns.forEach(btn => {
        if (btn.textContent.includes('修改')) {
            btn.addEventListener('click', function() {
                const homeworkName = this.closest('tr').querySelector('td:first-child').textContent;
                alert(`进入「${homeworkName}」修改页面，可调整作业内容、截止时间、分值等参数`);
                // 实际项目中可替换为跳转至作业修改详情页
                // window.location.href = `edit-homework.html?id=${homeworkId}`;
            });
        }
    });
</script>

</body>
</html>
